<template>
	<base-page title="新人首单红包" backgroundColor="white">
		<view class="mt-16 mx-16 mb-8 flex-shrink">
			<text class="font-bold">新人首单红包</text>
		</view>
		<view class="flex-1 mx-16">
			<view class="w-full px-16 py-12 radius-8 bg-default">
				<view class="mb-16 flex justify-between item-center">
					<text>红包金额</text>
					<input class="text-right" type="digit" v-model="firstRedPacketAmt" placeholder="请输入红包金额" @blur="lookFirstRed"/>
				</view>
				<view class="mb-16 flex justify-between item-center">
					<text>红包数量</text>
					<input class="text-right" type="number" :maxlength="8" v-model="redPacketNum" placeholder="请输入红包数量" />
				</view>
				<view class="flex justify-between item-center">
					<text>红包有效期</text>
					<view class="flex item-center">
						<input class="text-right" type="number" :maxlength="8" v-model="validDay" placeholder="领取后几天内有效" />
						<text class="ml-4">天</text>
					</view>
				</view>
			</view>
		</view>
		<template #footer>
			<view class="m-12 flex-shrink flex">
				<button class="flex-1 flex center radius-8 h-46 bg-primary text-white fs-16 font-normal leading-22" @click="submit">确认
					{{totalPrice > 0 ? `(预计成本${totalPrice}元）` : ''}}
				</button>
			</view>
		</template>
	</base-page>
</template>

<script setup name="RedPacketSetting">
	import { onLoad } from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		getCurrentInstance,
	} from 'vue'
	import {judegDit} from '@/utils/index.js'
	const instance = getCurrentInstance()
	
	const firstRedPacketAmt = ref(null)
	const redPacketNum = ref(null)
	const validDay = ref(null)
	
	const totalPrice = computed(() => {
		if (firstRedPacketAmt.value && redPacketNum.value) {
			return (+firstRedPacketAmt.value) * (+redPacketNum.value)
		}
		return 0
	})
	const lookFirstRed =() => {
		if(!judegDit(firstRedPacketAmt.value)){
			uni.showToast({
				icon:'none',
				title:`至多只能保留两位小数`
			})
			firstRedPacketAmt.value = null
		}
		if(Number(firstRedPacketAmt.value)>99999999){
			uni.showToast({
				icon:'none',
				title:`红包金额不可大于99999999`
			})
			firstRedPacketAmt.value = null
		}
	}
	const checkInput = () => {
		if (!firstRedPacketAmt.value) {
			showToast('请输入红包金额')
			return false
		} else if (firstRedPacketAmt.value <= 0) {
			showToast('红包金额不能小于0')
			return false
		}
		if (!redPacketNum.value) {
			showToast('请输入红包数量')
			return false
		} else if (redPacketNum.value <= 0) {
			showToast('红包数量不能小于0')
			return false
		}
		if (!validDay.value) {
			showToast('请输入红包有效天数')
			return false
		} else if (validDay.value <= 0) {
			showToast('红包有效天数不能小于0')
			return false
		}
		return true
	}

	const submit = () => {
		if (checkInput()) {
			const eventChannel = instance.ctx.getOpenerEventChannel()
			eventChannel.emit('onRedPacketChange', {
				firstRedPacketAmt: +firstRedPacketAmt.value,
				redPacketNum: +redPacketNum.value,
				validDay: +validDay.value,
			})
			uni.navigateBack()
		}
	}
	
	const showToast = (title) => {
		uni.showToast({
			title,
			icon: 'none'
		})
	}

	onLoad(() => {
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			if (data.activeRedPacket) {
				firstRedPacketAmt.value = data.activeRedPacket.firstRedPacketAmt
				redPacketNum.value = data.activeRedPacket.redPacketNum
				validDay.value = data.activeRedPacket.validDay
			}
		})
	})
</script>
